<template>
  <div class="app-container app-container-compactness">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px" label-position="left">
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="queryParams.goods_name" placeholder="商品名称" clearable size="small" />
      </el-form-item>
      <el-form-item label="成品料号" prop="serial_number">
        <el-input v-model="queryParams.serial_number" placeholder="成品料号" clearable size="small" />
    </el-form-item>
      <el-form-item label="型号" prop="sku">
        <el-input v-model="queryParams.sku" placeholder="型号" clearable size="small" />
      </el-form-item>
      <el-form-item label="尺寸" prop="new_carton_size">
        <el-input v-model="queryParams.new_carton_size" placeholder="尺寸" clearable size="small" />
      </el-form-item>
      <!--  <el-form-item label="条形码" prop="barcode">-->
<!--        <el-input v-model="queryParams.barcode" placeholder="条形码" clearable size="small" />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-action="'product@create'"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleCreate({}, '添加')"
        >添加
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" size="mini" :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品编号">
              <span>{{ props.row.goods_id }}</span>
            </el-form-item>
<!--            <el-form-item label="商品条形码">-->
<!--              <span>{{ props.row.barcode }}</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="客户代码">-->
<!--              <span>{{ props.row.new_account_code }}</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="供应商">-->
<!--              <span>{{ props.row.supplier_name }}</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="制造商">-->
<!--              <span>{{ props.row.manufacturer_name }}</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="品牌">-->
<!--              <span>{{ props.row.brand_name }}</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="关联料号">-->
<!--              <span>{{ props.row.relation_material }}</span>-->
<!--            </el-form-item>-->
            <!-- <el-form-item label="物料型号">
              <span>{{ props.row.new_material_type }}</span>
            </el-form-item> -->
            <el-form-item label="包装规格">
              <span v-for="(item, index) in props.row.packing_name" :key="index">
                {{ item.packing_num + '/' + item.unit_name }}
              </span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{ props.row.describe }}</span>
            </el-form-item>
            <el-form-item label="计量单位">
              <span>{{ props.row.new_unit_of_measurement }}</span>
            </el-form-item>
            <el-form-item label="申报要素">
              <span>{{ props.row.new_declaration_elements }}</span>
            </el-form-item>
            <el-form-item label="手册号">
              <span>{{ props.row.new_manual_number }}</span>
            </el-form-item>
            <el-form-item label="项号">
              <span>{{ props.row.new_item_number }}</span>
            </el-form-item>
            <!--            <el-form-item label="净重">-->
            <!--              <span>{{ props.row.new_net_weight }}</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="托盘尺寸">
              <span>{{ props.row.new_pallet_size }}</span>
            </el-form-item>
            <el-form-item label="纸箱尺寸">
              <span>{{ props.row.new_carton_size }}</span>
            </el-form-item>
            <el-form-item label="单托毛重">
              <span>{{ props.row.new_gross_weight_per_support }}</span>
            </el-form-item>
            <el-form-item label="单箱毛重">
              <span>{{ props.row.new_gross_weight_per_case }}</span>
            </el-form-item>
            <!-- <el-form-item label="SKU">
              <span>{{ props.row.sku }}</span>
            </el-form-item> -->
            <el-form-item label="创建时间">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>
      <!--      <el-table-column label="ID" align="center" prop="id" width="60" />-->
      <el-table-column label="成品料号" align="center" prop="serial_number" />
      <el-table-column label="商品中文名称" align="center" prop="goods_Cname" />
      <el-table-column label="型号" align="center" prop="sku" />
      <el-table-column label="尺寸" align="center" prop="new_carton_size" />
<!--      <el-table-column label="商品英文名称" align="center" prop="goods_Ename" />-->
<!--      <el-table-column label="料号体系" align="center" prop="item_number_system" />-->
<!--      <el-table-column label="单位净重" align="center" prop="clean_heavy" />-->
<!--      <el-table-column label="HSCODE" align="center" prop="HSCODE" />-->
      <el-table-column label="描述" align="center" prop="describe" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template v-slot="scope">
          <el-button
            v-action="'product@update'"
            size="mini"
            type="primary"
            @click="handleCreate(scope.row, '编辑')"
          >编辑</el-button>
          <el-button
            v-action="'product@delete'"
            size="mini"
            type="danger"
            @click="delPort(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />
    <!-- 新增 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">

        <el-row>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="form.goods_name" />
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="商品中文名称" prop="goods_Cname">-->
<!--              <el-input v-model="form.goods_Cname" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="8">
            <el-form-item label="成品料号" prop="serial_number">
              <el-input v-model.trim="form.serial_number" />
            </el-form-item>
          </el-col>

          <!-- <el-form-item label="货物类型" prop="fwlx">
            <el-radio v-model="radio" label="1">普通货物</el-radio>
            <el-radio v-model="radio" label="2">专属货物</el-radio>
          </el-form-item> -->
        </el-row>
        <el-form-item label="包装规格" prop="packing_id">
          <el-select
            v-model="form.packing_id"
            placeholder="请选择包装规格"
            filterable
            clearable
            :multiple="true"
            style="width:709px"
          >

            <!-- :label="'包装数量(' + item.packing_num + ')--包装单位(' + item.unit_name + ')--每托箱数(' + item.layup_num + ')'" -->
            <el-option
              v-for="(item, index) in pack"
              :key="index"
              :label="'1/'+item.layup_num+'/'+item.packing_total +'/'+'(托/箱/件)'"
              :value="item.packing_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="sku">
          <el-input v-model="form.sku"  />
        </el-form-item>
        <el-col :span="8">
          <el-form-item label="尺寸" prop="new_carton_size">
            <el-input v-model="form.new_carton_size" placeholder="" />
          </el-form-item>
        </el-col>
        <el-row>
          <el-col :span="8">
            <el-form-item label="料号体系" prop="item_number_system">
              <el-input v-model="form.item_number_system" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="基本单位" prop="company">
              <el-input v-model="form.company" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位净重" prop="clean_heavy">
              <el-input v-model="form.clean_heavy" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="海关税号 HSCODE" prop="HSCODE">
              <el-input v-model="form.HSCODE" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联料号" prop="relation_material">
              <el-input v-model="form.relation_material" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申报要素" prop="new_declaration_elements">
              <el-input v-model="form.new_declaration_elements" placeholder="" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="手册号" prop="new_manual_number">
              <el-input v-model="form.new_manual_number" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项号" prop="new_item_number">
              <el-input v-model="form.new_item_number" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="托盘尺寸" prop="new_pallet_size">
              <el-input v-model="form.new_pallet_size" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="单托毛重" prop="new_gross_weight_per_support">
              <el-input v-model="form.new_gross_weight_per_support" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单箱毛重" prop="new_gross_weight_per_case">
              <el-input v-model="form.new_gross_weight_per_case" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <!--   5.5新增 start      -->
        <!--        <el-form-item label="净重" prop="new_net_weight">-->
        <!--          <el-input v-model="form.new_net_weight" placeholder="" />-->
        <!--        </el-form-item>-->
        <!--   5.5新增 end      -->

        <el-form-item label="描述" prop="describe">
          <el-input v-model="form.describe" type="textarea" style="width:709px" :rows="2" placeholder="" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplier_id">
              <el-select v-model="form.supplier_id" placeholder="请选择供应商" style="width:100%">
                <el-option
                  v-for="(item, index) in supplier"
                  :key="index"
                  :label="item.account_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="制造商" prop="manufacturer_id">
              <el-select
                v-model="form.manufacturer_id"
                placeholder="请选择供应商"
                style="width:100%"
                @change="restBrand"
              >
                <el-option
                  v-for="(item, index) in manufacturer"
                  :key="index"
                  :label="item.account_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品品牌" prop="brand_name">
              <el-input v-model="form.brand_name" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="货主" prop="owner">
              <el-input v-model="form.owner" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留字段1" prop="_ext_field_1">
              <el-input v-model="form._ext_field_1" placeholder="预留字段" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留字段2" prop="_ext_field_2">
              <el-input v-model="form._ext_field_2" placeholder="预留字段" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="预留字段3" prop="_ext_field_3">
              <el-input v-model="form._ext_field_3" placeholder="预留字段" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留字段4" prop="_ext_field_4">
              <el-input v-model="form._ext_field_4" placeholder="预留字段" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预留字段5" prop="_ext_field_5">
              <el-input v-model="form._ext_field_5" placeholder="预留字段" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <!--       预留字段-->

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="open = false">取消</el-button>

          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<style>
.el-input__inner {
  /* width: 721px; */
}

.el-input__suffix {
  right: 10%;
}
</style>
<script>
import {
  productList,
  createProduct,
  updateProduct,
  delProduct,
  // getSupplier,
  // getManufacturer,
  getBrand,
  getPack
} from '@/api/product'
import { getSupplier, getManufacturer } from '@/api/basics'
export default {
  name: 'Index',
  data() {
    return {
      // 遮罩层
      loading: true,
      open: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pack: [],
      radio: '1',
      supplier: [],
      manufacturer: [],
      brand: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        packing_id: undefined,
        unit_name: undefined
      },
      form: {},
      show: false,
      ids: [],
      multiple: false,
      rules: {
        // supplier_id: [
        //   { required: true, message: '请选择供应商', trigger: 'change' }
        // ],
        // manufacturer_id: [
        //   { required: true, message: '请选择制造商', trigger: 'change' }
        // ],
        // brand_id: [
        //   { required: true, message: '请选择品牌', trigger: 'change' }
        // ],
        packing_id: [
          { required: true, message: '请选择包装规格', trigger: 'change' }
        ],
        goods_name: [
          { required: true, message: '请填写商品名称', trigger: 'change' }
        ],
        barcode: [
          { required: true, message: '请选择条形码', trigger: 'change' }
        ],
        goods_Cname: [
          { required: true, message: '请填写商品中文名称', trigger: 'change' }
        ],
        serial_number: [
          { required: true, message: '请填写成品料号', trigger: 'change' }
        ],
        sku: [
          { required: true, message: '请填写型号', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    form: {
      handler: function(val, oldVal) {
        // if (!val.goods_name || !val.goods_Ename) {
        //   this.form.sku = ''
        // } else {
        //   this.form.sku = `${val.goods_name}/${val.goods_Ename}`
        // }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const goods_name = this.$route.query.goods_name
    if (goods_name) {
      this.queryParams.goods_name = goods_name
    }
    this.getList()
    this.getBase()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    restBrand(manufacturer_id) {
      getBrand({ manufacturer_id: manufacturer_id }).then(response => {
        this.brand = response.data
      })
      console.log(this.brand)
    },
    /** 打开 */
    handleCreate(row, title) {
      const that = this

      that.form = row
      that.title = title
      that.open = true
      if (that.$refs['form']) {
        that.$refs['form'].clearValidate()
      }
    },
    getBase() {
      getPack({}).then(response => {
        // console.log(response)
        this.pack = response.data
      })
      getSupplier({}).then(response => {
        this.supplier = response.data
      })
      getManufacturer({}).then(response => {
        this.manufacturer = response.data
      })
      // getBrand({}).then(response => {
      //   this.brand = response.data
      // })
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      // console.log(this.queryParams)
      productList(this.queryParams).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.count
        this.loading = false
      })
    },
    submitForm(formName) {
      const that = this
      that.form.tenant_id = that.$store.state.user.tenant_id
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!that.form.id) {
            createProduct(that.form).then(response => {
              // console.log(response)
              that.$message.success(response.message)
              that.open = false
              that.getList()
            })
          } else {
            updateProduct(that.form).then(response => {
              // console.log(response)
              that.$message.success(response.message)
              that.open = false
              that.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    delPort(row) {
      const that = this
      that.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        delProduct({ id: row.id }).then(response => {
          that.$message.success(response.message)
          that.getList()
        })
      }).catch(() => {
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        packing_id: undefined,
        unit_name: undefined
      }
      this.handleQuery()
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    }
  }
}
</script>

